<template>
  <div class="container">
    <van-form ref='form'>
      <van-nav-bar
          title="预约会议室"
          left-text="返回"
          left-arrow
          @click-left="backPrePage"
      />
      <!--会议主题-->
      <van-field class="my-titel"
                 left-icon="records"
                 v-model="meetData.meetTitle"
                 label="会议主题："
                 :rules="[{ required: true, message: '请填写会议主题' }]"
                 placeholder=""/>
      <!--会议日期-->
      <van-field
          left-icon="calendar-o"
          readonly
          clickable
          name="calendar"
          :value="meetData.dateValue"
          label="会议日期："
          placeholder="会议日期"
          @click="showPopFn()"
      />
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()"
                             @cancel="cancelFn()"/>
      </van-popup>

      <!--会议时间-->
      <!--      <van-field-checkbox-->
      <!--          left-icon="calendar-o"-->
      <!--          label="会议时间："-->
      <!--          placeholder="请拟定-会议时间"-->
      <!--          v-model="value2"-->
      <!--          :columns="columns"-->
      <!--          label-width="100"-->
      <!--          :option="{label:'name',value:'code'}"-->
      <!--          @confirm="confirm"-->
      <!--      />-->
      <van-field
          :rules="[{ required: true, message: '开始时间不能为空' }]"
          v-model="timeValue"
          label="开始时间"
          left-icon="calendar-o"
          placeholder=""
          @click="startTime"
      />

      <van-popup v-model="showTime" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
            v-model="currentTime"
            type="time"
            :min-hour="10"
            :max-hour="20"
            @confirm="timeConfirm"
            @cancel="timeCancel"
        />
      </van-popup>

      <van-field
          :rules="[{ required: true, message: '结束时间不能为空' }]"
          v-model="timeValue2"
          label="结束时间"
          left-icon="calendar-o"
          placeholder=""
          @click="startTime2"
      />

      <van-popup v-model="showTime2" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
            v-model="currentTime2"
            type="time"
            :min-hour="10"
            :max-hour="20"
            @confirm="timeConfirm2"
            @cancel="timeCancel2"
        />
      </van-popup>
      <!--会议类型-->
      <van-field class="my-radio" name="radio" left-icon="guide-o" label="会议类型">
        <template #input>
          <van-radio-group v-model="meetData.meetType" direction="horizontal">
            <van-radio name="0">线上</van-radio>
            <van-radio name="1">室内</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <!--参会人员-->
      <van-field-checkbox
          class="my-man"
          left-icon="friends-o"
          label="参会人员："
          placeholder="请邀请-参会人员"
          v-model="value3"
          :columns="columns2"
          label-width="100"
          :option="{label:'name',value:'code'}"
          @confirm="confirm2"
      />
      <!--会议室-->
      <van-field class="my-field"
                 left-icon="service-o"
                 readonly
                 clickable
                 name="picker"
                 :value="meetData.meetPlace"
                 label="预约议室："
                 placeholder="请提前-预约议室"
                 @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
            show-toolbar
            :columns="meetArray"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        />
      </van-popup>

      <!--联系方式    -->
      <div class="form1">
        <div class="row_title">
          <van-icon :name="man.icon"/>
          {{ man.displayName }}:
          <!--        <i class="xing" v-if="man.require">*</i>-->
        </div>
        <van-number-keyboard
            v-model="man.value"
            :show="showNum"
            @blur="showNum = false"
        />
        <van-field
            type="tel"
            readonly
            clickable
            :value="man.value"
            @touchstart.native.stop="showNum = true"
        />
        <!--        :rules="telRules"-->
      </div>

      <!--详细地点-->
      <div class="formOne">
        <div class="row_one">
          <div class="row_h46">
            <van-icon name="location-o"/>
            详细地点:
          </div>
          <div class="row_h46 posr">
            <input style="width:100%" class="row_input border_none"
                   @click="getAddress"
                   v-model="meetData.address"/>
            <i class="iconfont icon-dingwei rightIcon"></i>
          </div>
        </div>
      </div>
      <van-field
          left-icon="newspaper-o"
          class="my-meet"
          v-model="meetData.meetSummary"
          rows="1"
          autosize
          label="会议概要："
          type="textarea"
          placeholder="请简要描述会议的主要内容,本次会议核心思想围绕xxx展开!"
          maxlength="500"
          show-word-limit
      />
      <!--会议发起-->
      <div class="btn_box">
        <button class="sub_btn" @click="submitMeet">会议发起</button>
      </div>
    </van-form>
  </div>
</template>

<script>
import SelectMultiple from "../../components/SelectMultiple";
import VanFieldCheckbox from "../../components/VanFieldCheckbox";
import Util from "../../utils/utils";

export default {
  name: "MeetMain",

  components: {SelectMultiple, VanFieldCheckbox},
  data() {
    return {
      timeValue: '',//会议开始时间
      showTime: false,
      currentTime: '12:00',
      timeValue2: '',//会议结束时间
      showTime2: false,
      currentTime2: '12:00',
      meetData: {
        meetTitle: '', //会议主题
        dateValue: '',
        timeArray: [],//会议时间
        meetType: '1',//会议类型
        manArray: [],// 选中参会人员集合
        meetPlace: '',  //会议地点
        address: '',//联系方式
        meetSummary: '', //会议概要
      },
      //日期组件
      currentDate: new Date(),
      changeDate: new Date(),
      show: false, // 用来显示弹出层
      value2: [], // 会议时间
      value3: [], //参会人员
      //会议室初始化内容
      meetPlace: '',
      meetArray: ['5201 会议室', '5202 会议室', '5203 会议室', '5204 会议室', '5205 会议室'],
      showPicker: false,
      showNum: false,
      man: {
        icon: 'phone-o',
        name: 'phone',
        require: true,
        displayName: '联系方式',
        value: '',
        disabled: false
      },
      columns: [// 如果可选数据不是label-value,需要配置下option，如果是就不需要配置
        {code: "01", name: "00:00 ~ 01:00"},
        {code: "02", name: "01:00 ~ 02:00"},
        {code: "03", name: "02:00 ~ 03:00"},
        {code: "04", name: "03:00 ~ 04:00"},
        {code: "05", name: "04:00 ~ 05:00"},
        {code: "06", name: "05:00 ~ 06:00"},
        {code: "07", name: "06:00 ~ 07:00"},
        {code: "08", name: "07:00 ~ 08:00"},
        {code: "09", name: "08:00 ~ 09:00"},
        {code: "10", name: "09:00 ~ 10:00"},
        {code: "11", name: "10:00 ~ 11:00"},
        {code: "12", name: "11:00 ~ 12:00"},
        {code: "13", name: "12:00 ~ 13:00"},
        {code: "15", name: "14:00 ~ 15:00"},
        {code: "16", name: "15:00 ~ 16:00"},
        {code: "17", name: "16:00 ~ 17:00"},
        {code: "18", name: "17:00 ~ 18:00"},
        {code: "19", name: "18:00 ~ 19:00"},
        {code: "20", name: "19:00 ~ 20:00"},
        {code: "21", name: "20:00 ~ 21:00"},
        {code: "22", name: "21:00 ~ 22:00"},
        {code: "23", name: "22:00 ~ 23:00"},
        {code: "24", name: "23:00 ~ 24:00"}
      ],
      columns2: [// 如果可选数据不是label-value,需要配置下option，如果是就不需要配置
        {code: "01", name: "张三"},
        {code: "02", name: "李四"},
        {code: "03", name: "王五"},
      ],
      tempMeetMan: '',
      telRules: [
        //     {
        //   required: true,
        //   message: '手机号码不能为空',
        //   trigger: 'onBlur'
        // }, {
        //   // 自定义校验规则
        //   validator: value => {
        //     return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)
        //   },
        //   message: '请输入正确格式的手机号码',
        //   trigger: 'onBlur'
        // }
      ],
    }
  },
  async mounted() {
    //会议日期-默认当前日期
    this.meetData.dateValue = this.timeFormat(this.currentDate);

    const that = this;
    var urlData = this.$route.query // 获取路径上的参数
    if (urlData.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
      that.meetData.address = urlData.addr;
    }
  },
  methods: {
    startTime() {
      this.showTime = true
    },
    timeConfirm(val) {
      this.timeValue = val
      this.showTime = false
    },
    timeCancel(val) {
      this.showTime = false
    },
    startTime2() {
      this.showTime2 = true
    },
    timeConfirm2(val) {
      this.timeValue2 = val
      this.showTime2 = false
    },
    timeCancel2(val) {
      this.showTime2 = false
    },
    //会议发起
    submitMeet() {
      const startTime = parseInt(this.timeValue.replace(':', ''));
      const endTime = parseInt(this.timeValue2.replace(':', ''));

      // 全局表单验证
      this.$refs.form.validate().then(() => {
        //进行比较
        if (startTime > endTime) {
          this.$toast.fail("开始时间不能大于结束时间！")
        } else {
          this.$toast.success('提交成功')
          this.$router.push('/meet/meetReserve?meetTitle=' + this.meetData.meetTitle
              + "&dateValue=" + this.meetData.dateValue
              + "&tempMeetTime=" + this.timeValue + " ~ " + this.timeValue2
              + "&meetPlace=" + this.meetData.meetPlace
              + "&address=" + this.meetData.address
          )
        }
      }).catch((e) => {
        this.$toast.fail(e[0].message)
      })
    },
    onConfirm(value) {
      this.meetData.meetPlace = value;
      this.showPicker = false;
    },
    getAddress() {
      window.location.href = TX_CALLBACK_URL;
    },
    backPrePage() {
      this.$router.go(-1);
    },
    myReserve() {
      this.$router.push('/meet/MeetReserve')
    },
    //会议时间事件
    confirm(data1, data2) { // select确定,
      // tips 正常获取值，用不到这个方法，用v-model获取值即可，这个方法是告诉你，可以获取任何你想要的数据
      // data1 是当前选中数据的value的数组
      // data2 是当前选中数据的整个obj集合
      this.meetData.timeArray = data2
    },
    //参会人员事件
    confirm2(data1, data2) { // select确定,
      this.meetData.manArray = data2
    },
    showPopFn() {
      this.show = true;
    },
    showPopup() {
      this.show = true;
    },
    changeFn() { // 值变化是触发
      this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
    confirmFn() { // 确定按钮
      this.meetData.dateValue = this.timeFormat(this.currentDate);
      this.show = false;
    },
    cancelFn() {
      this.show = false;
    },
    timeFormat(time) { // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + '年' + month + '月' + day + '日'
    }
  }
}
</script>

<style lang="less" scoped>
.my-radio {
  margin-top: 1%;
}

.my-man {
  margin-top: 1%;
}

.my-titel {
  margin-top: 1%;
}

.container {
  height: 100vh;
  width: 100vw;
  background-color: #f4f4f4;
  text-align: center;
  font-size: 14px;
}

/deep/ .van-field__control--right {
  text-align: left;
  margin-left: -6% !important;
}

.row_h46 {
  padding-left: 2%;
  height: 46px;
  line-height: 46px;
  text-align: left;
}

.row_input {
  width: 100%;
  padding-left: 5%;
}

.border_none {
  border: none;
}

.my-meet {
  margin-top: 1%;
}

.form1 {
  margin-top: 1%;
  display: flex;
  padding-left: 3%;
  border: none;
  background-color: #fff;
  padding: 0 10px;
}

.row_title {
  padding-left: 2%;
  padding-top: 3%;
  width: 150px;
  text-align: left;
}

.xing {
  color: red;
  position: relative;
  top: 0;
  left: 0;
  font-size: 16px;
}

.rightIcon {
  position: absolute;
  right: 5px;
  top: 5px;
  color: red;
}

.formOne {
  text-align: left;
  background-color: #fff;
  padding: 0 10px;
  margin-top: 1%;
}
</style>
